import React from 'react'
import { StyleSheet, Text, View, SafeAreaView, Button, Linking, TouchableHighlight, Image, ScrollView } from 'react-native'
// 引入字体图标库
import Icon from 'react-native-vector-icons/FontAwesome'
// 搜索图标名称 https://oblador.github.io/react-native-vector-icons/
const App = () => {
  const clickBtn = () => {
    console.log('被电击了');
    // 跳转到外部链接
    // Linking.openURL('https://www.baidu.com')
  }
  return (
    <SafeAreaView style={styles.constainer}>
      <ScrollView>
        <View style={styles.layview, styles.backgrounView}>
          <Text style={{ color: '#fff' }}>文本一</Text>
          <Text style={{ color: '#fff' }}>文本一</Text>
          <Text style={{ color: '#fff' }}>文本一</Text>
          <Text style={{ color: '#fff' }}>文本一</Text>
        </View>
        <View>
          <Text name='search'>ICON用法：</Text>
          <Icon name='search' size={40} color='red' />
          <Button title='点击' onPress={clickBtn} color='red' />
        </View>
        <TouchableHighlight style={styles.myTouchlight} onPress={clickBtn} activeOpacity={0.55} underlayColor='blue'
        >
          <Text style={styles.myText}>我是按钮</Text>
        </TouchableHighlight>
        <View>
          <Image
            source={require('./src/assets/img/cat.jpg')}
            resizeMode='cover'
            style={{ width: 300, height: 100 }}
          />
        </View>
      </ScrollView>
    </SafeAreaView>
  )
}

export default App

const styles = StyleSheet.create({
  constainer: {
    flex: 1,
    backgroundColor: '#eee',
    color: '#ffffff'
  },
  layview: {
    display: 'flex',
    flexDirection: 'row',// 必须指定方向
  },
  backgrounView: {
    backgroundColor: 'green'
  },
  myTouchlight: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    marginTop: 20,
    width: 200,
    height: 50,
    borderRadius: 25,
    backgroundColor: 'blue',
  },
  myText: {
    width: 200,
    height: 50,
    textAlign: 'center',
    lineHeight: 50,
    color: '#fff',

  }
})